<template>
    <div class="l-tab-page" style="padding: 8px">
        <div class="l-rblock" style="background-color: #fff; padding: 0 8px">
            <div class="l-auto-window h48">
                <el-tabs v-model="activeName">
                    <el-tab-pane :label="`待评定 [ ${awaitAssessNum} ]`" name="first">
                        <AwaitAssess v-if="activeName == 'first'" ref="awaitAssess" @refresh="getTabPaneIndex" />
                    </el-tab-pane>
                    <el-tab-pane :label="`待兑现 [ ${awaitCashNum} ]`" name="second">
                        <AwaitCash v-if="activeName == 'second'" ref="awaitCash" @refresh="getTabPaneIndex" />
                    </el-tab-pane>
                    <el-tab-pane :label="`已兑现 [ ${cashedNum} ]`" name="third">
                        <Assessed v-if="activeName == 'third'" ref="assessed" />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import {
    awaitCashFormColmuns,
    assessedFormColmuns,
    awaitCashFormData,
    assessedFormData,
} from "./columns";
import AwaitAssess from "./AwaitAssess"
import AwaitCash from "./AwaitCash"
import Assessed from "./Assessed";
export default {
    components: {
        AwaitAssess,
        AwaitCash,
        Assessed
    },
    data() {
        return {
            awaitAssessNum: 0,
            awaitCashNum: 0,
            cashedNum: 0,
            formHeight: 44,
            awaitCashFormColmuns,
            assessedFormColmuns,
            awaitCashFormData,
            assessedFormData,
            tableLoading: true,
            tableData: [],
            tableTotal: 0,
            tableCurrentPage: 1,
            tablePageSize: 50,
            tableBtns: [{ prop: "Assess", label: "评定" }],
            activeName: "first",
        };
    },
    computed: {
        update_cycle_code_options() {
            return this.lr_dataItemOptions(this.lr_dataItem["update_cycle_code"]);
        },
        region_code_options() {
            return this.lr_dataItemOptions(this.lr_dataItem["region_code"]);
        },
        comprehensive_evaluation_options() {
            return this.lr_dataItemOptions(this.lr_dataItem["comprehensive_evaluation"]);
        }
    },
    created() {
        this.getTabPaneIndex()
    },
    mounted() {
        this.lr_loadDataItem("update_cycle_code");
        this.lr_loadDataItem("region_code");
        this.lr_loadDataItem("comprehensive_evaluation");
        this.lr_loadDataItem("redemption_type_code");
        this.lr_loadDataItem("evaluationlevel");
    },
    methods: {
        async getTabPaneIndex() {
            // 
            let awaitAssessApi = window.$crud("land/reward/assess/pending");
            let awaitAssessRes = await this.$awaitWraper(awaitAssessApi.getPage({
                page: 1,
                rows: 1,
            }))
            this.awaitAssessNum = awaitAssessRes.records;
            //
            let awaitCashApi = window.$crud("land/reward/redemption/pending");
            let awaitCashRes = await this.$awaitWraper(awaitCashApi.getPage({
                page: 1,
                rows: 1,
            }))
            this.awaitCashNum = awaitCashRes.records;
            //
            let cashedApi = window.$crud("land/reward/redemption/done");
            let cashedRes = await this.$awaitWraper(cashedApi.getPage({
                page: 1,
                rows: 1,
            }))
            this.cashedNum = cashedRes.records

        }

    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__nav .el-tabs__item {
    font-size: 16px;
}

::v-deep .el-tabs__nav #tab-first {
    // margin-left: 20px;
}

::v-deep .el-tabs__nav .el-tabs__active-bar {
    // margin-left: 20px;
}

::v-deep .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll {
    background-color: #fff;
}
</style>
